<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>产品管理管理</title>
    <link href="${ctxStatic}/bootstrap/plugins/chose/chosen.css" type="text/css" rel="stylesheet" />
    <link href="${ctxStatic}/bootstrap/plugins/star/css/star-rating.min.css" type="text/css" rel="stylesheet" />
    <meta name="decorator" content="default"/>
    <style>
        .miniPic{
            max-width:100px;
            max-height:100px;
            _height:100px;
            border:0;
            padding:3px;
        }
        .mini-input{
            width: 60px;
        }
    </style>
</head>
<body>
<div class="main-content">
    <tags:breadcrumb menuId="产品添加" />
    <div class="page-content">
        <div class="tabbable">
            <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="productTab">
                <li class="active">
                    <a data-toggle="tab" href="#base">基本信息</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#detail">详细信息</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#pictureTab">产品图片</a>
                </li>
            </ul>

            <div class="tab-content">
                <div id="base" class="tab-pane in active">
                    <form:form id="inputForm" modelAttribute="product" action="${ctx}/cms/product/save" method="post" class="form-horizontal">
                        <form:hidden path="id"/>
                        <div class="form-group">
                            <label class="col-md-1 no-padding-right control-label"><span class="important">*</span>中文名称:</label>
                            <div class="col-md-5">
                                <form:input path="name" htmlEscape="false" maxlength="200" class="col-md-10 required"/>
                            </div>
                            <label class="col-md-1 no-padding-right control-label"><span class="important">*</span>英文名称:</label>
                            <div class="col-md-5">
                                <form:input path="enname" htmlEscape="false" maxlength="200" class="col-md-10 required"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-1 no-padding-right control-label"><span class="important">*</span>中文关键字:</label>
                            <div class="col-md-5">
                                <form:input path="keywords" htmlEscape="false" maxlength="64" class="col-md-10 required" placeholder="多个用,分隔"/>
                            </div>
                            <label class="col-md-1 no-padding-right control-label"><span class="important">*</span>英文关键字:</label>
                            <div class="col-md-5">
                                <form:input path="enkeywords" htmlEscape="false" maxlength="64" class="col-md-10 required" placeholder="多个用,分隔"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-1 no-padding-right control-label"><span class="important">*</span>缩略图:</label>
                            <div class="col-md-5">
                                <input type="hidden" name="miniLogo" id="miniLogo" value="${product.miniLogo}"/>
                                <tags:ckfinder input="miniLogo" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                            </div>
                            <label class="col-md-1 no-padding-right control-label">图片说明:</label>
                            <div class="col-md-5">
                                <form:input path="alt" htmlEscape="false" maxlength="20" cssClass="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-1 no-padding-right control-label"><span class="important">*</span>产品价格:</label>
                            <div class="col-md-3">
                                <form:input path="price" htmlEscape="false" maxlength="200" class="col-md-6 number required"/>
                                <form:select path="priceUnit" cssStyle="margin-left: 5px;">
                                    <form:options items="${fns:getDictList('price_unit')}" itemLabel="label" itemValue="value" />
                                </form:select>
                            </div>
                            <label class="col-md-1 no-padding-right control-label"><span class="important">*</span>开盘日期:</label>
                            <div class="col-md-3">
                                <form:input path="openDate" htmlEscape="false" maxlength="200" class="col-md-10 required"/>
                            </div>
                            <label class="col-md-1 no-padding-right control-label"><span class="important">*</span>交房日期:</label>
                            <div class="col-md-3">
                                <form:input path="launchDate" htmlEscape="false" maxlength="200" class="col-md-10 required"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-1 no-padding-right control-label">户型:</label>
                            <div class="col-md-3">
                                <select name="houseStyle" class="col-md-8">
                                    <option value="">&nbsp;</option>
                                    <option value="一室一厅">一室一厅</option>
                                    <option value="一室">一室</option>
                                    <option value="两室一厅">两室一厅</option>
                                    <option value="三室一厅">三室一厅</option>
                                    <option value="四室一厅">四室一厅</option>
                                </select>
                            </div>
                            <label class="col-md-1 no-padding-right control-label">促销类型:</label>
                            <div class="col-md-3">
                                <form:select path="promotionType" cssClass="col-md-8">
                                    <form:option value="" label="请选择"/>
                                    <form:options items="${fns:getDictList('promotion_type')}" itemValue="value" itemLabel="label"/>
                                </form:select>
                            </div>
                            <label class="col-md-1 no-padding-right control-label">产品评星:</label>
                            <div class="col-md-3">
                                <input name="stars" id="stars" value="${product.stars}" type="number" class="rating" data-show-clear="false" data-show-caption="false" min=0 max=5 step=0.2 data-size="xs">
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-1 no-padding-right control-label">中文地址:</label>
                            <div class="col-md-11">
                                <form:input path="address" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-1 no-padding-right control-label">英文地址:</label>
                            <div class="col-md-11">
                                <form:input path="enaddress" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-1 no-padding-right control-label">中文标签:</label>
                            <div class="col-md-11">
                                <select name="labels" multiple class="width-80 chosen-select tag-input-style" data-placeholder="Choose a  标签...">
                                    <option value="">&nbsp;</option>
                                    <option value="一室一厅">一室一厅</option>
                                    <option value="一室">一室</option>
                                    <option value="两室一厅">两室一厅</option>
                                    <option value="三室一厅">三室一厅</option>
                                    <option value="四室一厅">四室一厅</option>
                                </select>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-1 no-padding-right control-label">英文标签:</label>
                            <div class="col-md-11">
                                <select name="enLabels" multiple class="width-80 chosen-select tag-input-style" data-placeholder="Choose a  Labels...">
                                    <option value="">&nbsp;</option>
                                    <option value="一室一厅">一室一厅</option>
                                    <option value="一室">一室</option>
                                    <option value="两室一厅">两室一厅</option>
                                    <option value="三室一厅">三室一厅</option>
                                    <option value="四室一厅">四室一厅</option>
                                </select>
                            </div>
                        </div><hr>
                        <div class="form-actions">
                            <div class="col-md-offset-4">
                                <shiro:hasPermission name="cms:product:edit"><input id="btnSubmit" class="btn btn-primary" type="button" value="保 存"/>&nbsp;</shiro:hasPermission>
                                <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
                            </div>
                        </div>
                    </form:form>
                </div>

                <div id="detail" class="tab-pane">
                    <form:form id="detailForm" modelAttribute="product" action="${ctx}/cms/product/save" method="post" class="form-horizontal">
                        <input type="hidden" name="id" value="${product.id}"/>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">物业类别:</label>
                            <div class="col-md-4">
                                <form:select path="propertyType" cssClass="col-md-10">
                                    <form:option value="" label="--请选择物业--"/>
                                    <form:options items="${fns:getDictList('property_type')}" itemValue="value" itemLabel="label"/>
                                </form:select>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">英文物业类别:</label>
                            <div class="col-md-4">
                                <form:select path="enPropertyType" cssClass="col-md-10">
                                    <form:option value="" label="--请选择物业--"/>
                                    <form:options items="${fns:getDictList('en_property_type')}" itemValue="value" itemLabel="label"/>
                                </form:select>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">建筑类别:</label>
                            <div class="col-md-4">
                                <form:select path="style" cssClass="col-md-10">
                                    <form:option value="" label="--请选择建筑类别--"/>
                                    <form:options items="${fns:getDictList('build_type')}" itemValue="value" itemLabel="label"/>
                                </form:select>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">英文建筑类别:</label>
                            <div class="col-md-4">
                                <form:select path="enstyle" cssClass="col-md-10">
                                    <form:option value="" label="--请选择建筑类别--"/>
                                    <form:options items="${fns:getDictList('en_build_type')}" itemValue="value" itemLabel="label"/>
                                </form:select>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">项目特色:</label>
                            <div class="col-md-4">
                                <form:input path="projectFeatures" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">英文项目特色:</label>
                            <div class="col-md-4">
                                <form:input path="enProjectFeatures" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">装修状况:</label>
                            <div class="col-md-4">
                                <form:select path="decoration" cssClass="col-md-10">
                                    <form:option value="" label="--请选择装修状况--"/>
                                    <form:options items="${fns:getDictList('decoration')}" itemValue="value" itemLabel="label"/>
                                </form:select>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">英文装修状况:</label>
                            <div class="col-md-4">
                                <form:select path="enDecoration" cssClass="col-md-10">
                                    <form:option value="" label="--请选择装修状况--"/>
                                    <form:options items="${fns:getDictList('en_decoration')}" itemValue="value" itemLabel="label"/>
                                </form:select>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">容 积 率:</label>
                            <div class="col-md-4">
                                <form:input path="capacityRate" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">绿 化 率:</label>
                            <div class="col-md-4">
                                <form:input path="greenRate" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">物 业 费:</label>
                            <div class="col-md-2">
                                <form:input path="propertyFee" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                            <label class="col-md-1 no-padding-right control-label">单位:</label>
                            <div class="col-md-2">
                                <form:select path="propertyFeeUnit">
                                    <form:option value="" label="--请选择--" />
                                    <form:options items="${fns:getDictList('property_charges')}" itemValue="value" itemLabel="label"/>
                                </form:select>
                            </div>
                            <label class="col-md-1 no-padding-right control-label">英文单位:</label>
                            <div class="col-md-2">
                                <form:select path="enPropertyFeeUnit">
                                    <form:option value="" label="--请选择--" />
                                    <form:options items="${fns:getDictList('en_property_charges')}" itemValue="value" itemLabel="label"/>
                                </form:select>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">物业公司:</label>
                            <div class="col-md-4">
                                <form:input path="propertyCorp" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">英文物业公司:</label>
                            <div class="col-md-4">
                                <form:input path="enPropertyCorp" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">开 发 商:</label>
                            <div class="col-md-4">
                                <form:input path="hairDealer" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">英文开发商:</label>
                            <div class="col-md-4">
                                <form:input path="enHairDealer" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">预售许可证:</label>
                            <div class="col-md-4">
                                <form:input path="preSalePermit" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">英文预售许可证:</label>
                            <div class="col-md-4">
                                <form:input path="enPreSalePermit" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">物业地址:</label>
                            <div class="col-md-4">
                                <form:input path="propertyAddress" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">英文物业地址:</label>
                            <div class="col-md-4">
                                <form:input path="enPropertyAddress" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-group">
                            <label class="col-md-2 no-padding-right control-label">交通状况:</label>
                            <div class="col-md-4">
                                <form:input path="traffic" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                            <label class="col-md-2 no-padding-right control-label">英文交通状况:</label>
                            <div class="col-md-4">
                                <form:input path="enTraffic" htmlEscape="false" maxlength="200" class="col-md-10"/>
                            </div>
                        </div><hr>
                        <div class="form-actions">
                            <div class="col-md-offset-4">
                                <shiro:hasPermission name="cms:product:edit"><input id="detailBtnSubmit" class="btn btn-primary" type="button" value="保 存"/>&nbsp;</shiro:hasPermission>
                                <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
                            </div>
                        </div>
                    </form:form>
                </div>

                <div id="pictureTab" class="tab-pane" style="margin-top: 5px;">
                    <div style="margin-bottom: 5px;">
                        <input type="button" name="uploadBtn" value="添加图片" class="btn btn-info btn-mini"/>
                        <input type="button" name="deleteBtn" value="删除所选" class="btn btn-danger btn-mini"/>
                        <input type="button" name="savePicBtn" value="提交" class="btn btn-danger btn-mini"/>
                    </div>
                    <form id="picForm" modelAttribute="product" method="post">
                        <input type="hidden" name="id" value="${product.id}"/>
                        <table name="pictable" class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <td>排序</td>
                                <td>图片</td>
                                <td>图片名称</td>
                                <td>图片说明</td>
                                <td>大小</td>
                                <td>后缀</td>
                                <td>类别</td>
                                <td>上传时间</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <c:if test="${not empty product.picInfoList}">
                                <c:forEach items="${product.picInfoList}" var="picInfo" varStatus="status">
                                    <c:if test="${not empty picInfo.id}">
                                        <tr>
                                            <td><input type="text" name="picInfoList[${ status.index + 1 }].picSort" value="${picInfo.picSort}" style="width:40px;"></td>
                                            <td><input type="hidden" name="picInfoList[${ status.index + 1 }].picSrc" value="${picInfo.picUrl}">
                                                <img src="${picInfo.picUrl}" class="miniPic"></td>
                                            <td><input type="text" name="picInfoList[${ status.index + 1 }].picName" value="${picInfo.picName}" readonly="true"></td>
                                            <td><input type="text" name="picInfoList[${ status.index + 1 }].picDesc" value="${picInfo.picDesc}"></td>
                                            <td><input type="text" name="picInfoList[${ status.index + 1 }].picSize" value="${picInfo.picSize}" class="mini-input" readonly="true"></td>
                                            <td><input type="text" name="picInfoList[${ status.index + 1 }].picPrefix" value="${picInfo.picPrefix}" class="mini-input" readonly="true"></td>
                                            <td><input type="text" name="picInfoList[${ status.index + 1 }].picType" value="${picInfo.picType}" class="mini-input" readonly="true"></td>
                                            <td><fmt:formatDate value="${picInfo.uploadTime}" pattern="yyyy-MM-dd"/></td>
                                            <td><a href="javascript:;">删除</a></td>
                                        </tr>
                                    </c:if>
                                </c:forEach>
                            </c:if>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加图片</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" name="picture" id="picture" value=""/>
                <tags:ckfinder input="picture" type="images" uploadPath="/photo" selectMultiple="true" readonly="false" maxWidth="100" maxHeight="100"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addPicSubmit">确定</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#name").focus();
        $("#openDate").date({dateFmt:"yyyy-MM-dd"});
        $("#launchDate").date({dateFmt:"yyyy-MM-dd"});
        //初始化数据
        $("select[name='labels']").find("option").each(function(i,obj){
            var labels = "${product.labels}";
            if(labels.indexOf($(obj).text())!=-1){
                $(obj).attr("selected",true);
            }
        });
        $("select[name='enLabels']").find("option").each(function(i,obj){
            var labels = "${product.enLabels}";
            if(labels.indexOf($(obj).text())!=-1){
                $(obj).attr("selected",true);
            }
        });
        $(".chosen-select").chosen();
        //初始化户型
        $("select[name='houseStyle'] option[value='${product.houseStyle}']").attr("selected", true);
        $("#btnSubmit").click(function(){
            if($("#inputForm").valid()){
                var index = layer.load(1);
                $.post("${ctx}/cms/product/save",$("#inputForm").serialize(),function(data){
                    layer.close(index);
                    if(data.success){
                        $("input[name='id']").val(data.attributes.id);
                        showNote("success", function(){
                            return false;
                        }, data.msg);
                    }else{
                        showNote("error",function(){return false;},data.msg);
                    }
                });
            }else{
                showNote("error",function(){return false;},"输入有误，请正确输入数据","center");
            }
        });

        $("#detailBtnSubmit").click(function(){
            if($("#detailForm").valid()){
                var id = $("#id").val();
                if(id==null || id=="" ){
                    showNote("error",function(){return false;},"请先填写产品基本信息","center");
                    return false;
                }
                var index = layer.load(1);
                $.post("${ctx}/cms/product/save",$("#detailForm").serialize(),function(data){
                    layer.close(index);
                    if(data.success){
                        $("input[name='id']").val(data.attributes.id);
                        showNote("success", function(){
                            return false;
                        }, data.msg);
                    }else{
                        showNote("error",function(){return false;},data.msg);
                    }
                });
            }else {
                showNote("error",function(){return false;},"输入有误，请正确输入数据","center");
            }
        });

        //添加图片
        $("input[name='uploadBtn']").click(function(){
            $("#myModal").modal();
        });

        //确定添加图片
        $("#addPicSubmit").click(function(){
            var picture = $("#picture").val();
            picture = picture.substr(1,picture.length -1);
            $.post("${ctx}/cms/file/query",{filePath:picture},function(data){
                var len = $("table[name='pictable']").find("tbody tr").length;
                len = len == undefined ? 0 : len;
                var i = (len+1);
                var trStr = "<tr>"+
                            "<td><input type='text' name='picInfoList["+i+"].picSort' value='"+i+"' style='width:40px;'/></td>"+
                            "<td><input type='hidden' name='picInfoList["+i+"].picSrc' value='"+data.filePath+"' />" +
                            "<img src=\""+data.filePath+"\" class=\"miniPic\"/></td>"+
                            "<td><input type='text' name='picInfoList["+i+"].picName' value='"+data.fileName+"' readonly='true' /></td>"+
                            "<td><input type='text' name='picInfoList["+i+"].picDesc' /></td>"+
                            "<td><input type='text' name='picInfoList["+i+"].picSize' value='"+data.fileSize+"KB' class='mini-input' readonly='true' /></td>"+
                            "<td><input type='text' name='picInfoList["+i+"].picPrefix' value='"+data.prefix+"' class='mini-input' readonly='true' /></td>"+
                            "<td><input type='text' name='picInfoList["+i+"].picType' value='效果图' class='mini-input' readonly='true' /></td>"+
                            "<td></td>"+
                            "<td><a href='javascript:;'>删除</a></td>"+
                            "</tr>";
                $("table[name='pictable']").find("tbody").append(trStr);
                $("#myModal").modal('hide');
                $("#picture").val("");
                pictureDelAll();
            });
        });

        //提交保存图片
        $("input[name='savePicBtn']").click(function(){
            var id = $("#picForm").find("input[name='id']").val();
            if( id==null || id == "" ){
                showNote("error",function(){return false;},"请选择产品,或者先保存产品");
            }
            var len = $("table[name='pictable']").find("tbody tr").length;
            if( len <= 0 ){
                showNote("error",function(){return false;},"至少选择一张图片");
            }
            var data = [];
            for(var i=1; i <= len; i++){
                var picSort = $("input[name='picInfoList["+i+"].picSort']").val();
                var picUrl = $("input[name='picInfoList["+i+"].picSrc']").val();
                var picName = $("input[name='picInfoList["+i+"].picName']").val();
                var picDesc = $("input[name='picInfoList["+i+"].picDesc']").val();
                var picSize = $("input[name='picInfoList["+i+"].picSize']").val();
                var picType = $("input[name='picInfoList["+i+"].picType']").val();
                var picPrefix = $("input[name='picInfoList["+i+"].picPrefix']").val();
                data.push({"picSort": picSort, "picUrl": picUrl, "picName": picName, "picDesc": picDesc, "picSize": picSize, "picType": picType, "picPrefix": picPrefix});
            }
            var dataStr = JSON.stringify(data);
            $.post("${ctx}/cms/product/savePic",{id:id,data:dataStr},function(data){
                if(data.success){
                    showNote("success", function(){
                        return false;
                    }, data.msg);
                }else{
                    showNote("error",function(){return false;},data.msg);
                }
            });
        });
    });
</script>
<script src="${ctxStatic}/bootstrap/plugins/chose/chosen.jquery.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/bootstrap/plugins/star/js/star-rating.min.js" type="text/javascript"></script>
</body>
</html>
